<template>
  <view class="album-grid">
    <view 
      class="album-item" 
      v-for="album in albums" 
      :key="album.albumId"
      @click="$emit('albumClick', album)"
      @longpress="$emit('albumLongpress', album)"
    >
      <view class="album-selection">
        <view 
          class="selection-circle" 
          :class="{
            'selected': isSelected(album),
            'edit-mode': isEditMode
          }"
          @click.stop="$emit('toggleSelection', album)"
        >
          <u-icon v-if="isSelected(album)" name="checkmark" size="14" color="#fff"></u-icon>
        </view>
      </view>
      <view class="album-cover">
        <image 
          :src="album.coverUrl || '/static/default-album.png'" 
          mode="aspectFill"
        ></image>
        <view v-if="album.status === 0" class="privacy-badge">
          <text>私密</text>
        </view>
      </view>
      <view class="album-info">
        <text class="album-name">{{ album.title }}</text>
        <text class="photo-count">{{ album.photoCount }}张</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'AlbumGrid',
  props: {
    albums: {
      type: Array,
      required: true
    },
    isEditMode: {
      type: Boolean,
      default: false
    },
    selectedAlbums: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    isSelected(album) {
      return this.selectedAlbums.some(item => item.albumId === album.albumId);
    }
  }
}
</script>

<style scoped>
/* 优化网格布局 */
.album-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx;
  min-height: 200rpx; /* 确保有最小高度 */
  transition: all 0.3s; /* 添加过渡效果 */
}

.album-item {
  width: calc(50% - 10rpx);
  margin: 5rpx;
  border-radius: 15rpx;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all 0.3s; /* 添加过渡效果 */
  animation: fadeIn 0.5s ease-out; /* 添加淡入动画 */
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20rpx); }
  to { opacity: 1; transform: translateY(0); }
}

.album-selection {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  z-index: 5;
  transition: all 0.3s;
}

.selection-circle {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  border: 2px solid #fff;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  opacity: 0.5;
  transform: scale(0.8);
}

/* 编辑模式下的选择框样式 */
.selection-circle.edit-mode {
  opacity: 1;
  transform: scale(1);
}

.selection-circle.selected {
  background-color: #3a8838;
  border-color: #3a8838;
  opacity: 1;
  transform: scale(1);
}

.album-cover {
  height: 320rpx;
  position: relative;
}

.album-cover image {
  width: 100%;
  height: 100%;
}

.album-info {
  padding: 15rpx;
}

.album-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
  display: block;
}

.photo-count {
  font-size: 22rpx;
  color: #999;
}

/* 创建新相册样式 */
.new-album .album-cover {
  background-color: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2rpx dashed #ccc;
  border-bottom: none;
}

.privacy-badge {
  position: absolute;
  top: 15rpx;
  left: 15rpx;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 20rpx;
  padding: 8rpx 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
  font-size: 26rpx;
  font-weight: 500;
  color: #fff;
  z-index: 4;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}
</style> 